<template>
  <div
    class="elx-steps-horizontal scrollbar-slinder scrollbar-white-slinder1 size16 no-select"
    :class="abstracts.length > 8 ? '' : 'flex-around'"
  >
    <div v-for="(item, index) in abstracts" class="info" :key="index">
      <el-popover placement="bottom-start" width="220" trigger="hover">
        <div class="lh24">
          <div class="title-2">
            【状态--{{
              item.workStateName == "处理" ? "填报" : item.workStateName
            }}】{{ Number(item.workState) ? "已完成" : "未完成" }}
          </div>
          <div>单位：{{ item.companyName }}</div>
          <div>
            {{
              item.workStateName == "处理" ? "填报" : item.workStateName
            }}人：{{ item.dealUser }}
          </div>
        </div>
        <div slot="reference">
          <div
            class="info-content"
            :class="[index < value ? 'color-success' : '']"
          >
            <i
              class="el-icon-s-help size18"
              v-if="index > value"
              style="padding-right:2px"
            ></i>
            <i
              class="el-icon-circle-check size18"
              style="padding-right:2px"
              v-else
            ></i>
            <div class="info-text-groups">
              <span>{{
                item.workStateName == "处理" ? "填报" : item.workStateName
              }}</span>
              <div
                class="sline"
                v-show="index != abstracts.length - 1"
                :class="index < value ? 'active-line' : ''"
              ></div>
            </div>
            <i
              class="el-icon-arrow-right size24 color-info"
              v-show="index < abstracts.length - 1"
            ></i>
          </div>
          <div class="title">
            <div
              :class="[index < value ? 'color-success' : '']"
              @click="btnClick(index)"
            >
              {{ item.companyName }}
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: "elx-steps-horizontal",
  components: {},
  props: {
    value: {
      default: 0,
      type: Number,
      required: true
    },
    abstracts: {
      type: Array,
      required: true
    }
  },
  data() {
    return {};
  },
  computed: {},
  mounted() {
    console.log("abstracts", this.abstracts);
  },
  methods: {
    /**
     * @name 处理改填报
     */
    toTianBao(text) {
      let data = text;
      if (text == "处理") {
        data = "填报";
      }
      return data;
    },
    // 中英文字符长度计算
    fnGetencnlength(str) {
      let sLen = 0;
      // let strs = str;
      try {
        // 先将回车换行符做特殊处理
        // strs = str.replace(/(\r\n+|\s+|+)/g, '龘');
        // 处理英文字符数字，连续字母、数字、英文符号视为一个单词
        // strs = str.replace(/[\x00-\xff]/g, 'm');
        // 合并字符m，连续字母、数字、英文符号视为一个单词
        // str = str.replace(/m+/g,"*");
        // 去掉回车换行符
        // strs = str.replace(/龘+/g, '');
        // 返回字数
        // sLen = str.length;
        for (let i = 0; i < str.length; ++i) {
          const charCode = str.charCodeAt(i);
          if (charCode >= 0 && charCode <= 128) {
            sLen += 1;
          } else {
            sLen += 2;
          }
        }
        return sLen;
      } catch (e) {
        console.log("e", e);
      }
      return sLen;
    },
    btnClick(index) {
      this.$emit("change", index);
    }
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.elx-steps-horizontal {
  width: 100%;
  padding-left: 30px;
  min-width: 400px;
  position: relative;
  overflow: auto;
  display: flex;
  height: 70px;
  flex-flow: row nowrap;
  background: #f5f7fa;
  padding: 5px 0;
  //   justify-content: space-around;
  align-items: center;
  .info {
    min-width: 200px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    .title {
      .info-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /*color: #bfcbd9;*/
        cursor: pointer;
      }
    }
    .info-content {
      width: 100%;
      height: 30px;
      padding: 2px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      .square {
        border: 1px solid $--border-color-base;
        background-color: $--color-white;
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 15px;
        padding-top: 3px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.25);
      }
      .squareactive {
        background-color: $--color-primary;
        color: $--color-white;
      }
      .squarefinish {
        background-color: $--color-white;
        color: $--color-primary;
        border: 1px solid $--color-primary;
      }
      .info-text-groups {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .sline {
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          width: calc(100%);
          margin-left: 5px;
          // position: absolute;
          // height: 1px;
          // background-color: rgba(0,0,0,0.1);
        }
        .active-line {
          border-color: $--color-success;
        }
        .text-active {
          padding-left: 5px;
        }
        .info-active {
          padding-top: 16px;
          padding-left: 3px;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}
</style>
